<template>
  <van-cell
    center
    :title='name'
    :label="author + ' - ' + name"
  >
    <template #right-icon>
      <van-icon
        name="play-circle-o"
        size="0.6rem"
        @click="palyFn"
      />
    </template>
  </van-cell>
</template>

<script>
export default {
  props: {
    // 音乐名称
    name: String,
    // 歌手
    author: String,
    // 音乐id
    id: Number,
  },
  methods: {
    palyFn() {
      // 怎么跳转 - 通过Vue路由？
      // 编程式导航 - 通过 JS 跳转路由
      this.$router.push({
        path: "/play",
        query: {
          id: this.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.van-cell {
  border-bottom: 1px solid #ddd;
}
</style>